<template>
  <div class="coupon-page">
    <div class="title">优惠券</div>
    <div class="coupon-type">
      <div class="type" @click="status = 0" :class="{ active: status == 0 }">
        <span>已领取</span><b>{{ couponList.length }}</b>
      </div>
      <div class="type" @click="status = 2" :class="{ active: status == 2 }">
        <span>已失效</span><b>{{ couponList.length }}</b>
      </div>
      <div class="type" @click="status = 1" :class="{ active: status == 1 }">
        <span>已使用</span><b>{{ couponList.length }}</b>
      </div>
      <div class="type" @click="status = 3" :class="{ active: status == 3 }">
        <span>优惠券中心</span>
      </div>
    </div>
    <div class="coupon-list">
      <CouponItem2
        :coupon="item"
        :list_status="status"
        v-for="(item, index) in couponList"
        @change="getCouponList"
        :key="index"
      />
    </div>
  </div>
</template>

<script>
import api from "@/api";
import { mapState } from "vuex";
import CouponItem2 from "@/components/CouponItem/CouponItem2.vue";

export default {
  name: "UserCoupon",
  components: { CouponItem2 },
  computed: {
    ...mapState("user", ["userinfo"]),
  },
  data() {
    return {
      status: 0,
      couponList: [],
    };
  },
  watch: {
    status() {
      this.getCouponList();
    },
  },
  created() {
    this.getCouponList();
  },
  methods: {
    async getCouponList() {
      let result = await api.COUPON_LIST(this.status);
      this.couponList = result;
      console.log(result);
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-page {
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 20px;
  }
  .coupon-type {
    display: flex;
    .type {
      display: flex;
      flex: 1;
      height: 36px;
      border: 1px solid #f0f0f0;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #666666;
      cursor: pointer;

      &.active {
        font-weight: 600;
        color: #d52c1a;
        b {
          color: #d52c1a;
          display: inline-block;
        }
      }
      b {
        color: #333;
        margin-left: 16px;
        display: none;
      }
    }
  }
  .coupon-list {
    padding: 19px 0;
    & > div:nth-child(3n + 1) {
      margin-left: 0;
    }
  }
}
</style>
